+9<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<style>
* {
	margin: 0;
	padding: 0;
}
.new {
	width: 1200px;
	height: 90px;
	margin: auto;
}
.new_01 {
	width: 80px;
	height: 80px;
	background-image: url(image/tb.png);
	margin: 5px;
}
.new_02 {
	width: 565px;
	height: 40px;
	margin: -45px 0 5px 400px;
	float: right;
}
.new_02_01 {
	width: 398px;
	height: 38px;
	float: left;
	border: 1px #ccc solid;
}
.new_02_02 {
	width: 40px;
	height: 40px;
	background-image: url(image/fdj.png);
	float: left;
}
.new_02_03 {
	width: 100px;
	height: 40px;
	background: #FFDB3D;
	line-height: 40px;
	font-size: 16px;
	text-align: center;
	float: right;
}
.dh {
	width: 1200px;
	height: 50px;
	margin: auto;
}
.dh_01 {
	width: 240px;
	height: 50px;
	background: #FF4A00;
	float: left;
	color: #fff;
	text-align: center;
	line-height: 50px;
	font-size: 16px;
}
.dh_02 {
	width: 96px;
	height: 50px;
	float: left;
	background: #404144;
	color: #fff;
	text-align: center;
	line-height: 50px;
	font-size: 16px;
}
.dh a {
	text-decoration: none;
	color: #fff;
	display: block;
}
.dh a:hover {
	background-color: #333;
}
.sl {
	width: 220px;
	height: 560px;
	float:left;
}
.sl_01 {
	width: 240px;
	height: 80px;
	border: 1px #ccc solid;
	float: left;
	
}

.red{color:red;margin: 0 0 0 20px;
	line-height: 40px; font-size:14px;}
.black {
	font-size:14px;
	margin: 0 0 0 20px;
}

.xt{width:960px;heoght:160px;background:#FF0004; float:right; margin:15px 0 0 0;}
.xt_01{width:320px;height:160px;background:url(image/x1.jpg); float:left;}
.xt_02{width:320px;height:160px;background:url(image/x2.jpg); float:left;}
.xt_03{width:320px;height:160px;background:url(image/x3.jpg); float:left;}



/*下面的是旋转图*/
.banner {
	width: 960px;
	height: 400px;
	/*background: #FFF500;*/
	float: right;
	margin:0 0 0 -10px;
	-webkit-perspective: 960px;
	position: relative;
}
.pic {
	width: 960px;
	height: 400px;
	float:left;
}
.pic ul li {
	list-style: none;/*清除默认项目符号*/
	width: 240px;
	height: 400px;
	float: left;
	position: relative;
	-webkit-transform-style: preserve-3d;/*实现3D效果*/
	transform: translateZ(-200px);
}
.pic ul li span {
	display: block;
	width: 240px;
	height: 400px;
	position: absolute;
}
.pic ul li span:nth-child(1) {
	top: -400px;
	transform-origin: bottom;
	transform: translateZ(200px) rotateX(90deg);
	background-image:url(image/1.png);
}/*对应的是上*/
.pic ul li span:nth-child(2) {
	top: 400px;
	transform-origin: top;
	transform: translateZ(200px) rotateX(-90deg);/*deg是度数    以X轴旋转-90度*/
	background-image:url(image/2.png);
}/*对应的是下*/
.pic ul li span:nth-child(3) {
	transform: translateZ(200px);
	background-image: url(image/3.png);
}/*对应的是前*/
.pic ul li span:nth-child(4) {
	transform: translateZ(-200px) rotateX(180deg);
	background-image:url(image/4.png);
}/*对应的是后*/
.pic ul li span:nth-child(5) {
	width: 400px;
	left: -400px;
	transform-origin: right;
	transform: translateZ(200px) rotateY(-90deg);
}/*对应的是左*/
.pic ul li span:nth-child(6) {
	width: 400px;
	left: 240px;
	transform-origin: left;
	transform: translateZ(200px)rotateY(90deg);
}/*对应的是右*/
/*.pic:hover li{transform:translateZ(-200px)rotateX(180deg);}*/
.pic li:nth-child(1) span {
	background-position: 0px;
}
.pic li:nth-child(2) span {
	background-position: -240px;
}
.pic li:nth-child(3) span {
	background-position: -480px;
}
.pic li:nth-child(4) span {
	background-position: -720px;
}
.pic li:nth-child(1) {
	transition: 1s 0s;/*过度*/
}
.pic li:nth-child(2) {
	transition: 1s .3s;/*过度*/
}
.pic li:nth-child(3) {
	transition: 1s .6s;/*过度*/
}
.pic li:nth-child(4) {
	transition: 1s .9s;/*过度*/
}
.button {
	width: 100px;
	height: 20px;
	position: absolute;
	right: 5px;
	bottom: 5px;
}
.button ul li {
	list-style: none;
	width: 20px;
	height: 20px;
	background: #000;
	color: #fff;
	text-align: center;
	line-height: 20px;
	float: left;
	font-size: 12px;
	font-family: "微软雅黑";
	border-radius: 10px;
	margin: 0 2px;
	box-shadow: 3px 1px 5px #fff;
	cursor: pointer;
}

.dk{width:1200px;height:560px; margin:auto;}

</style>

<body>
<div class="new">
  <div class="new_01"></div>
  <div class="new_02">
    <div class="new_02_01"></div>
    <div class="new_02_02"></div>
    <div class="new_02_03">购物车</div>
  </div>
</div>
<div class="dh">
  <div class="dh_01">全部商品分类</div>
  <div class="dh_02"><a href="#">首&nbsp;&nbsp;页</a></div>
  <div class="dh_02"><a href="#">小米手机</a></div>
  <div class="dh_02"><a href="#">红&nbsp;&nbsp;米</a></div>
  <div class="dh_02"><a href="#">小米平板</a></div>
  <div class="dh_02"><a href="#">小米电视</a></div>
  <div class="dh_02"><a href="#">盒&nbsp;&nbsp;子</a></div>
  <div class="dh_02"><a href="#">路由器</a></div>
  <div class="dh_02"><a href="#">合约机</a></div>
  <div class="dh_02"><a href="#">服&nbsp;&nbsp;务</a></div>
  <div class="dh_02"><a href="#">社&nbsp;&nbsp;区</a></div>
</div>
<div class="dk">
<div class="sl">
  <div class="sl_01"><span class="red">购买手机</span><br/>
      <span class="black">小米Note小米4红米红米Note</span></div>
  <div class="sl_01"><span class="red">购买电视与平板</span><br/>
      <span class="black">小米电视小米盒子小米平板</span></div>
  <div class="sl_01"><span class="red">路由器与智能硬件</span><br/>
      <span class="black">路由器体重秤净化器与滤芯</span></div>
  <div class="sl_01"><span class="red">插线板、移动电源与电池</span><br/>
      <span class="black">小米移动电源电池充电器</span></div>
  <div class="sl_01"><span class="red">耳机音箱与存储卡</span><br/>
      <span class="black">小米头戴式耳机小米活塞耳机</span></div>
  <div class="sl_01"><span class="red">保护套与贴膜</span><br/>
      <span class="black">保护套/保护壳贴膜防尘塞</span></div>
  <div class="sl_01"><span class="red">后盖与个性化配件</span><br/>
      <span class="black">米键后盖贴纸手机支架</span></div>
</div>

<!----下面是旋转图---->
<div class="banner">
  <div class="pic">
    <ul>
      <li><span></span><span></span> <span></span><span></span> <span></span><span></span> </li>
      <li><span></span><span></span> <span></span><span></span> <span></span><span></span> </li>
      <li><span></span><span></span> <span></span><span></span> <span></span><span></span> </li>
      <li style="z-index:-1"><span></span><span></span> <span></span><span></span> <span></span><span></span> </li>
      <!--修改层级关系默认值为0-->
    </ul>
  </div>
  <div class="button">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
</div>

<div class="xt">

<div class="xt_01"></div>
<div class="xt_02"></div><div class="xt_03"></div>

</div>


</div>
<script src="js/jquery.js"></script> 
<script>
		$(".button li").click(function(){
		
		//当li被点击的时候执行一个事件
		var a =$(this).index();
		var b = a*90+'deg';
		
		$(".pic li").css("transform","translateZ(-200px) rotateX("+b+")");
		});

</script>
</body>
</html>
